<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue双向数据绑定v-model</title>
</head>

<body>
  <!-- 修改数据 -->
  <button>修改数据</button><br>
  <!-- 输入数据 -->
  用户名：<input type="text"><br>
  <!-- 显示数据 -->
  <output></output>

  <script>
    // 1.获取dom节点
    const btn = document.querySelector('button');
    const input = document.querySelector('input');
    const output = document.querySelector('output');

    // 2.模拟vue中的数据模型，data
    let data = {}

    // 3.给input输入框绑定监听事件
    input.addEventListener('input', function () {
      data.username = this.value
      // output.innerText = data.username
    }, false)

    // 4.修改data中的数据
    btn.addEventListener('click', function () {
      data.username = '张三'
    }, false)

    // 5.监听对象中数据的改变
    Object.defineProperty(data, 'username', {
      set(val) {
        setValue(val)
      }
    })

    // 6.封装视图更新函数
    function setValue(val) {
      output.innerText = val;
      input.value = val
    }
  </script>
</body>

</html>